<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>article no sidebar | Amaze UI Examples</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<meta name="msapplication-TileColor" content="#0e90d2">
		<link rel="stylesheet" href="assets/css/amazeui.min.css">
		<link rel="stylesheet" href="assets/css/app.css">
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>

		<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
	</head>

	<body  >
		<!-- header start -->
		<header  >
			<style>
				#triangle-facing-left {
					display: inline-block;
					border-left: 2px solid;
					border-bottom: 2px solid;
					width: 20px;
					height: 20px;
					transform: rotate(45deg);
				}
			</style>
		</header>
		<hr>
		<nav class="am-g am-g-fixed blog-fixed blog-nav">
			<a href="javascript:history.go(-1);" style="font-size: 30px;">
				<div id="triangle-facing-left"></div>
			</a> <span style="margin-left: 120px;">发现</span>
		</nav>
		<hr>
		<div class="am-g am-g-fixed blog-fixed blog-content" id="aa">
			<div class="am-u-sm-12">
				<article class="am-article blog-article-p">
					<div class="am-article-hd">
						<h1 class="am-article-title blog-text-center">{{articleInfo.title}} </h1>
						<p class="am-article-meta blog-text-center">
							<span><a href="#" class="blog-color">{{articleInfo.original}}</a></span>-
							<span><a href="#">{{articleInfo.createDate}}</a></span>
						</p>
					</div>
					<div id="aaa" style="overflow: hidden;">
					</div>
			</div>
			</article>
			<div style="clear: both;"></div>
			<hr>
			<hr>
		</div>
		</div>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="assets/js/amazeui.min.js"></script>
		<script>
			uuid = "b485bcb2024a11e88308902b340f4796";
			baseUrl="http://api.c-fairy.net:8080/api-restservice/";
			var result;
			var url = window.location.search; //获取url中"?"符后的字串  
			if(url.indexOf("?") != -1) {
				result = url.substr(url.indexOf("=") + 1);
			}
			console.log(result)
			new Vue({
				el: '#aa', //div的id
				data: {
					articleInfo: "", //数据，名称自定
					content: "",
					map_recomment: "",
					list_mapGoods: "",
				},
				created: function() { //created方法，页面初始调用    
					var url = baseUrl+"/getExploreArticle?uuid=" + uuid + "&articleId=" + result;
					let self = this;
					$.ajax({
						type: "post",
						url: url,
						dataType: "jsonp",
						success: function(data) {
							$("#aaa").html(data.data.content); //发现内容页
							self.content = data.data.content;
							self.articleInfo = data.data;
							self.map_recomment = self.articleInfo.map_recomment;
							self.list_mapGoods = self.map_recomment.list_mapGoods;
						}
					})
				}
			});
		</script>
	</body>
</html>